<template>
    <div class="my">
        <div class="header">
            <span @click="GoBack()"><van-icon name="arrow-left" /></span>
            <p>我的会员</p>
            <span></span>
        </div>
        <section>
            <div class="userImg">
                <dl>
                    <dt>
                        <van-image
                                round
                                width="1.2rem"
                                height="1.2rem"
                                :src="userPage.head?userPage.head:'https://img.yzcdn.cn/vant/cat.jpeg'"
                        />
                    </dt>
                    <dd>
                        <p>{{userName?userName:'昵称'}}</p>
                        <p>我的积分：{{integral?integral:0}}</p>
                    </dd>
                </dl>
            </div>
            <div class="allPay">
                <p><span>全部订单</span><span>查看全部订单&gt</span></p>
                <div class="payList">
                    <dl>
                        <dt>
                            <van-icon name="balance-pay" />
                        </dt>
                        <dd>
                            待支付
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <van-icon name="logistics" />
                        </dt>
                        <dd>
                            待收货
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <van-icon name="flower-o" />
                        </dt>
                        <dd>
                            待评价
                        </dd>
                    </dl>
                </div>
            </div>
            <ul class="doList">
                    <li @click="personalTo()"><span>个人资料</span><van-icon name="arrow" /></li>
                    <li @click="ManagementAddress()"><span>地址管理</span><van-icon name="arrow" /></li>
                    <li><span>绑定手机</span><van-icon name="arrow" /></li>
                    <li @click="changePwd()"><span>修改密码</span><van-icon name="arrow" /></li>
                    <li @click="toMyCollection()"><span>我的收藏</span><van-icon name="arrow" /></li>
            </ul>
            <p class="buttonGlup" v-if="bool"><button @click="getOutUser()">安全退出</button></p>
            <p class="buttonGlup" v-else><button @click="login()">登录/注册</button></p>
        </section>

    </div>
</template>
<script>
    import {getUserPage} from "../../api/list/list";

    export default {
        name:'My',
        data(){
            return{
                userName:'',
                integral:'',
                bool:false,
                userPage:[]
            }
        },
        created(){
            if(localStorage.getItem('isLogin')){
                this.bool = true
                let data = JSON.parse(localStorage.getItem('userData'))

                this.integral = data.utype
                const params = {
                    uid : data.uid,
                    token:'1ec949a15fb709370f'
                }
                getUserPage(params).then((res)=>{
                    console.log(res)
                    this.userPage = res.data.data
                    this.userName = res.data.data.nickname
                })
            }else{
                this.bool = false
            }
        },
        methods:{
            GoBack(){
                history.go(-1)
            },
            login(){
                this.$router.push('/login')
            },
            getOutUser(){
                localStorage.clear()
                this.$router.push('/login')
            },
            changePwd(){
                if(localStorage.getItem('isLogin')){
                    this.$router.push({path:'/changePwd',query:{uid:this.userPage.uid}})
                }else{
                    this.$router.push('/login')
                }

            },
            personalTo(){
                if(localStorage.getItem('isLogin')){
                    this.$router.push({path:'/personal',query:{pageData:JSON.stringify(this.userPage)}})
                }else{
                    this.$router.push('/login')
                }
            },
            toMyCollection(){
                this.$router.push({path:'/myCollection',query:{uid:this.userPage.uid}})
            },
            ManagementAddress(){
                this.$router.push({path:'/myAddress',query:{uid:this.userPage.uid}})
            }
        }
    }
</script>
<style lang="less" scoped>
    .my{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #efefef;
        .header{
            width: 100%;
            height: 1rem;
            display: flex;
            border-bottom: 1px solid #efefef;
            background: white;
            span{
                width: 1rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.4rem;
            }
            p{
                flex: 1;
                text-align: center;
                line-height: 1rem;
                font-size: 0.32rem;
            }
        }
        section{
            flex: 1;
            .userImg{
                width: 100%;
                height: 2.4rem;
                background: #d50a17;
                dl{
                    width: 100%;
                    display: flex;
                    padding-top: 0.8rem;
                    padding-left: 0.5rem;
                    box-sizing: border-box;
                    dt{
                        padding-top: 0.2rem;
                        box-sizing: border-box;
                    }
                    dd{
                       padding-left: 0.3rem;
                       padding-top: 0.6rem;
                       box-sizing: border-box;
                        color: white;
                    }
                }
            }
            .allPay{
                width: 100%;
                background: white;
                p{
                    width: 100%;
                    line-height: 0.8rem;
                    padding: 0 0.1rem;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #efefef;
                }
                .payList{
                    width: 100%;
                    display: flex;
                    padding: 0.1rem 0;
                    box-sizing: border-box;
                    dl{
                        flex: 1;
                        dt{
                            width: 100%;
                            font-size: 0.6rem;
                            color: red;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        dd{
                            text-align: center;
                        }
                    }
                }
            }
            .doList{
                width: 100%;
                margin-top: 0.2rem;
                background: white;
                li{
                    line-height: 0.7rem;
                    display: flex;
                    justify-content: space-between;
                    padding-left: 0.4rem;
                    box-sizing: border-box;
                    border-bottom: 1px solid #efefef;
                    i{
                        line-height: 0.7rem;
                        font-size: 0.4rem;
                        padding-right: 0.2rem;
                        box-sizing: border-box;
                    }
                }
            }
            .buttonGlup{
                width: 100%;
                text-align: center;
                padding: 0 0.2rem;
                box-sizing: border-box;
                button{
                    background: #d50a17;
                    color: white;
                    border: none;
                    outline: none;
                    border-radius: 3px;
                    width: 100%;
                    font-size: 0.32rem;
                    height: 0.6rem;
                    margin-top: 0.2rem;
                }
            }
        }
    }
</style>
